<template>
  <span>
    <div
      class="drawingWork clearfix"
      :style="{ marginLeft: marginLeft + 'px' }"
      @click="clearPop"
    >
      <div
        id="rightProperties"
        class="eProperty"
        :style="{ width: propsContentStyle.width + 'px' }"
      >
        <!--右侧属性栏-->
        <component :is="currentView" />
      </div>
      <div class="dmMove" @mousedown="lrDragMouseDown($event)" />
      <div class="dWork">
        <!--中间可视化编辑区-->
        <ViewEditArea />
      </div>
    </div>
    <CreateProjectDialog />
    <ProjectContentMenu />
    <PreviewDataDialog />
    <PreviewResultDialog />
    <PreviewLogsDialog />
    <PreviewRealLogDialog />
    <PreviewImageDialog />
    <PreviewCodeDialog />
    <SaveAsTemplateDialog />
    <SaveAsNewProject />
    <UpdateProjectDetailDialog />
  </span>
</template>
<script>
import ProjectPropsDestroy from './ProjectPropsDestroy.vue'
import ProjectContentMsg from './ViewEditArea/ProjectContentMsg.vue'
import ViewEditArea from './ViewEditArea.vue'
import UpdateProjectDetailDialog from './ProjectMenu/ProjectTree/UpdateProjectDetailDialog.vue'
import CreateProjectDialog from './ProjectMenu/ProjectTree/CreateProjectDialog.vue'
import ProjectContentMenu from './ProjectMenu/ProjectTree/ContentMenu.vue'
import PreviewDataDialog from './ViewEditArea/DragComponent/RightMenuContent/PreviewDataDialog.vue'
import PreviewResultDialog from './ViewEditArea/DragComponent/RightMenuContent/PreviewResultDialog.vue'
import PreviewLogsDialog from './ViewEditArea/DragComponent/RightMenuContent/PreviewLogsDialog.vue'
import PreviewRealLogDialog from './ViewEditArea/DragComponent/RightMenuContent/PreviewRealLogDialog.vue'
import PreviewImageDialog from './ViewEditArea/DragComponent/RightMenuContent/PreviewImageDialog.vue'
import PreviewCodeDialog from './ViewEditArea/DragComponent/RightMenuContent/PreviewCodeDialog.vue'
import SaveAsTemplateDialog from './ProjectMenu/ProjectTree/SaveAsTemplateDialog.vue'
import SaveAsNewProject from './ProjectMenu/ProjectTree/SaveAsNewProject.vue'

var $d3 = require('d3')
var win
export default {
  name: 'FlowEditorContent',
  components: {
    ProjectPropsDestroy,
    ViewEditArea,
    ProjectContentMenu,
    CreateProjectDialog,
    ProjectContentMsg,
    PreviewDataDialog,
    PreviewResultDialog,
    PreviewLogsDialog,
    PreviewRealLogDialog,
    PreviewImageDialog,
    PreviewCodeDialog,
    SaveAsTemplateDialog,
    SaveAsNewProject,
    UpdateProjectDetailDialog
  },
  data: function() {
    return {
      dragStyle: {
        // 拖拽属性
        conR: 0
      },
      marginLeft: 180
    }
  },
  computed: {
    currentView: function() {
      return this.flowData.selectComponent
    },
    flowData: function() {
      return this.$store.state.project.flowData
    },
    propsContentStyle: function() {
      return this.$store.state.project.flowData.propsContentStyle
    }
  },
  mounted() {
    this.$('body').addClass('loaded')
    this.$('#loader-wrapper .load_title').remove()
  },
  created: function() {
    this.clearPop() // 清除右键菜单，如果存在
    this.$store.state.global.otherState.previewProjectFlow = false
    this.$store.state.global.otherState.uuid = ''
    if (this.$router.currentRoute.path === '/show') {
      this.$store.state.global.otherState.previewProjectFlow = true
      this.showFillFlow()
    }
  },
  methods: {
    lrDragMouseDown: function(event) {
      // 按下
      var rightContent = document
        .getElementById('rightProperties')
        .getBoundingClientRect()
      this.dragStyle.conR = rightContent.right
      win = $d3
        .select(window)
        .on('mousemove', this.mouseMove)
        .on('mouseup', this.mouseUp)
      event.preventDefault()
    },
    mouseMove: function() {
      // 按下-拖动
      var curX = $d3.event.pageX
      var width = this.dragStyle.conR - curX
      this.propsContentStyle.width =
        width < 210 ? 210 : width > 400 ? 400 : width
    },
    mouseUp: function() {
      // 按下-放开
      win.on('mousemove', null).on('mouseup', null)
    },
    clearPop: function() {
      // 清理右键的弹框
      this.flowData.projectContextMenuMsg.display = 'none'
      this.flowData.nodeRightContentMsg.display = 'none'
      this.$store.state.project.modelMenu.contentMenuMessage.display = 'none'
    },
    dealFlowJson: function() {
      var data = {}
      var nodes = this.flowData.nodes
      var links = this.flowData.links
      data['style'] = this.flowData.contentStyle
      data['nodes'] = nodes
      data['links'] = links
      return JSON.stringify(data)
    },
    showFillFlow: function() {
      this.marginLeft = 0
      var path = this.$router.currentRoute.path
      var fullPath = this.$router.currentRoute.fullPath
      var search = fullPath.substring(path.length)
      var url = this.getSearchString(search, 'f')
      var uuid = url.substring(url.lastIndexOf('/') + 1)
      this.$store.state.global.otherState.uuid = uuid
      this.$store.dispatch('fillProjectJsonData', {
        url: url
      })
    },
    getSearchString(url, key) {
      // 根据键获取url参数中的value值
      // URL:?f=http://
      var str = url
      str = str.substring(1, str.length)
      // 以&分隔字符串，获得类似name=xiaoli这样的元素数组
      var arr = str.split('&')
      var obj = new Object()
      // 将每一个数组元素以=分隔并赋给obj对象
      for (var i = 0; i < arr.length; i++) {
        var tmp_arr = arr[i].split('=')
        obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1])
      }
      return obj[key]
    }
  }
}
</script>
